@layout("/common/_container.html"){
<style>
    html{
        width:100%;
        overflow-x:hidden;
    }
    .patientDetails{
        font-size: 14px;
        height: 100%;
        background: #F9F9F9;
    }
    .patientDetailsHeader{
        height: 3.5em;
        line-height: 3.5em;
        position: fixed;
        background: white;
        width: 100%;
        z-index: 1;
        border-bottom: 1px solid #E5E5E5;
        padding: 0 1em;
        display: flex;
    }
    .patientDetailsHeader > div{
        flex: 1;
    }
    .patientDetailsHeader > div:nth-child(2){
        color: black;
        text-align: center;
        font-size: 16px;
    }
    .patientDetailsHeader > div:last-of-type{
        text-align: right;
        line-height: 3em;
        color: #00a6c9;
        position: relative;
    }

    .patientDetailsPortrait{
        padding: 4.3em 0.8em 0.8em;
    }
    .patientDetailsPortrait > div{
        background: white;
        border-radius: 0.3em;
        padding: 1em;
    }
    .patientDetailsPortrait .PortraitOne{
        margin-bottom: 1em;
        display: flex;
        align-items: center;
    }
    .patientDetailsPortrait .PortraitOne > div{
        flex: 1;
    }
    .patientDetailsPortrait .PortraitOne div:first-of-type > span:first-of-type{
        display: inline-block;
        width: 4em;
        height: 4em;
        background: red;
        border-radius: 50%;
        vertical-align: middle;
    }
    .patientDetailsPortrait .PortraitTwo > div > div{
        display: flex;
    }
    .patientDetailsPortrait .PortraitTwo > div > div:first-of-type{
        font-size: 12px;
        color: #999999;
    }
    .patientDetailsPortrait .PortraitTwo > div > div > div:last-of-type{
        background: url("${ctxPath}/static/weixin-img/heng-1.png") repeat-x center;
        background-size: 3% ;
    }

    .patientDetailsOption{
        background: white;
    }
    .patientDetailsOption > div {
        display: flex;
    }
    .patientDetailsOption > div > div{
        flex: 1;
        text-align: center;
        margin: 0.8em;
        border-right:1px solid #eeeeee;
    }
    .patientDetailsOption > div > div:last-of-type{
        border:none;
    }
    .patientDetailsOption > div > div img{
        width: 36%;
    }

    .patientDetailsFooter{
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 1;
        height: 4em;
        padding: 1em 0;
        border-top: 1px solid #E5E5E5;
        text-align: center;
        display: flex;
        color: #00a6c9;
        background: white;
    }
    .patientDetailsFooter > div{
        flex: 1;
    }
    .patientDetailsFooter > div:first-of-type{
        border-right: 1px solid #dddddd;
    }
    .patientDetailsFooter > div > span{
        margin-right: 0.5em;
        font-size: 26px;
        vertical-align: bottom;
    }

    .boxShow{
        color: white;
        background: #343e48;
        position: absolute;
        right: -0.5em;
        padding: 0 0.8em
    }
    .boxShow > div{
        border-bottom: 1px solid white;
        text-align: left;
    }
    .boxShow > div:last-of-type{
        border: none;
    }
    .boxShow > div > img{
        width: 25%;
        vertical-align: middle;
    }
    .boxShow > div > span{
        vertical-align: middle;
        margin-left: 0.6em;
    }
</style>
<div style="display: none">
    <input type="hidden" id="pageNumber" value="medicalRecord">
</div>
<div class="patientDetails">
    <!--头部-->
    <div class="patientDetailsHeader">
        <div onclick="patient()"><span class="glyphicon glyphicon-menu-left"></span></div>
        <div>患者详情</div>
        <div>
            <span onclick="boxShow()" style="font-size: 30px;">+</span>
            <div class="boxShow" style="display: none">
                <div onclick="addAppointment()"><img src="${ctxPath}/static/weixin-img/06.jpg" alt="加载中"><span>新建预约</span></div>
                <div onclick="fullowDetails()"><img src="${ctxPath}/static/weixin-img/07.jpg" alt="加载中"><span>添加随访</span></div>
                <div onclick="medicalRecord()"><img src="${ctxPath}/static/weixin-img/08.jpg" alt="加载中"><span>添加病例</span></div>
                <div onclick="uploadImage()"><img src="${ctxPath}/static/weixin-img/09.jpg" alt="加载中"><span>上传影像</span></div>
            </div>
        </div>
    </div>
    <!--头像信息栏-->
    <div class="patientDetailsPortrait">
        <div>
            <div class="PortraitOne">
                <div>
                    <span></span>
                </div>
                <div style="flex: 2.5">
                    <span><span>刘狗狗 · 50 岁</span><br/><span>普通</span></span>
                </div>
                <div style="text-align: right"><span>编辑</span></div>
            </div>
            <div class="PortraitTwo">
                <div>
                    <div>
                        <div style="flex: 1;">病历号 · 门店</div>
                        <div style="flex: 2;background-size: 4%"></div>
                    </div>
                    <div>123456789 - 咿呀</div>
                </div>
                <div>
                    <div>
                        <div style="flex: 1;">备注</div>
                        <div style="flex: 8"></div>
                    </div>
                    <div>我是备注</div>
                </div>
            </div>
        </div>
    </div>
    <!--选项框-->
    <div class="patientDetailsOption">
        <div>
            <div>
                <div><img src="${ctxPath}/static/weixin-img/patientDetails01.jpg" alt="加载中..."></div>
                <span>详细信息</span>
            </div>
            <div>
                <div><img src="${ctxPath}/static/weixin-img/patientDetails02.jpg" alt="加载中..."></div>
                <span>预约记录</span>
            </div>
            <div>
                <div><img src="${ctxPath}/static/weixin-img/patientDetails03.jpg" alt="加载中..."></div>
                <span>随访记录</span>
            </div>
        </div>
        <div>
            <div>
                <div><img src="${ctxPath}/static/weixin-img/patientDetails04.jpg" alt="加载中..."></div>
                <span>病历记录</span>
            </div>
            <div style="border: none">
               <div><img src="${ctxPath}/static/weixin-img/patientDetails05.jpg" alt="加载中..."></div>
                <span>影像记录</span>
            </div>
            <div></div>
        </div>
    </div>
    <!--页脚-->
    <div class="patientDetailsFooter">
        <div><span class="glyphicon glyphicon-comment"></span>发短信</div>
        <div><span class="glyphicon glyphicon-earphone"></span>打电话</div>
    </div>
</div>
<script>
    function patient() {  //跳转到患者
        window.location.href = "${ctxPath}/doctorLooked/doctor_patient";
    }

    function addAppointment(){//新建预约
        var pageNumber = $("#pageNumber").val(); //患者详情页标识
        window.location.href = "${ctxPath}/doctorLooked/doctor_addAppointment/" + pageNumber;
    }

    function fullowDetails() {//添加随访
        var pageNumber = $("#pageNumber").val(); //患者详情页标识
        window.location.href = "${ctxPath}/doctorLooked/doctor_fullowDetails/" + pageNumber;
    }

    function medicalRecord() {//添加病历
        window.location.href = "${ctxPath}/doctorLooked/doctor_medicalRecord";
    }

    function uploadImage() {  //上传影像
        window.location.href = "${ctxPath}/doctorLooked/doctor_uploadImage";
    }


    function boxShow() {
        $(".boxShow").toggle();
    }
</script>
@}
